<template>
  <div>
    <a-card class="card" :bordered="false" :style="`min-height: ${cardMinHeight}px;`">
      <!--新增-->
      <a-modal
          destroyOnClose
          v-model='addModal'
          width='1100px'
          :title="isAdd?'新增':title"
          @cancel="handleCancel0"
          @ok="submitAddParams"
          :bodyStyle="bodyStyle"
      >
        <a-spin :spinning="spinning">
          <div style="width: 100%;min-height: 200px;display: flex;flex-direction: row;padding: 10px 24px 10px 24px;justify-content: center">
            <div style="width: 98%;">
              <a-form-model :model="addForm"  layout="inline"  >
                <a-form-model-item
                    label="备品备件编码"
                    required
                    style="margin-left: 0">
                  <a-popover trigger="click" placement="bottom" :overlayStyle="{ width: '350px' }">
                    <template slot="content">
                      <p class="aPopover" v-for="(item,index) in addForm.partSearchList" :key="index"  @click="changePart(item)" >{{'code:'+item.code+',name:'+item.name}}</p>
                    </template>
                    <a-input style='width: 350px;height: 32px;
                          margin-right: 10px' placeholder="备件编码搜索"
                             v-model.trim="addForm.spare_parts_code"
                             @keydown.enter="getPartIdByCodeLimit(addForm.spare_parts_code)"
                             @change="getPartIdByCodeLimit(addForm.spare_parts_code)"
                             @click="getPartIdByCodeLimit(addForm.spare_parts_code)"
                             allowClear
                             :disabled="!canBeEdited || !isAdd"></a-input>
                  </a-popover>
                </a-form-model-item>
                <a-form-model-item
                    required
                    label="备品备件名称"
                    style="margin-left: 10px">
                  <a-popover trigger="click" placement="bottom" :overlayStyle="{ width: '350px' }">
                    <template slot="content">
                      <p class="aPopover" v-for="(item,index) in addForm.partSearchList" :key="index"  @click="changePart(item)" >{{'code:'+item.code+',name:'+item.name}}</p>
                    </template>
                    <a-input style='width: 350px;height: 32px;margin-right: 10px'
                             placeholder="备件名称搜索"
                             v-model.trim="addForm.spare_parts_name"
                             @keydown.enter="getPartIdByNameLimit(addForm.spare_parts_name)"
                             @change="getPartIdByNameLimit(addForm.spare_parts_name)"
                             @click="getPartIdByNameLimit(addForm.spare_parts_name)"
                             allowClear
                             :disabled="!canBeEdited || !isAdd"></a-input>
                  </a-popover>
                </a-form-model-item>

                <a-form-model-item
                    label="批次编码"
                    required
                    style="margin-left: 28px">
                  <a-input style='width: 350px;height: 32px;' v-model.trim="addForm.batch_code"  :disabled="!canBeEdited || !isAdd"></a-input>
                </a-form-model-item>

                <a-form-model-item
                    label="数量"
                    style="margin-left: 87px">
                  <a-input style='width: 350px;height: 32px;' v-model.trim="addForm.quantity"
                           @change="calculateAmount(addForm.quantity)"
                           :disabled="!canBeEdited || !isAdd"></a-input>
                </a-form-model-item>

                <a-form-model-item
                    label="单价"
                    style="margin-left: 67px">
                  <a-input style='width: 350px;height: 32px;' v-model.trim="addForm.unit_price"
                           @change="calculate2Amount(addForm.unit_price)"
                           :disabled="!canBeEdited || !isAdd"></a-input>
                </a-form-model-item>

                <a-form-model-item
                    label="金额(自动计算)"
                    style="margin-left: 22px">
                  <a-input style='width: 350px;height: 32px;'
                           v-model.trim="addForm.amount"
                           placeholder="金额=数量*单价"
                           disabled></a-input>
                </a-form-model-item>

                <a-form-model-item
                    label="入库时间"
                    style="margin-left: 39px">
                  <a-date-picker
                      format="YYYY-MM-DD"
                      show-time
                      placeholder="入库时间"
                      v-model.trim="addForm.storage_date"
                      @change="onChangeStorageDate"
                      :allow-clear="true"
                      style='width: 350px;height: 32px;'
                      :disabled="!canBeEdited || !isAdd"
                  />
                </a-form-model-item>

                <a-form-model-item
                    label="领取状态"
                    style="margin-left: 58px">
                  <a-select
                      style='width: 350px;height: 32px;'
                      @change="claimedStatusChange"
                      v-model.trim="addForm.is_claimed"
                      allowClear
                      :disabled="!canBeEdited || !isAdd"
                  >
                    <a-select-option
                        v-for='item in addForm.claimedList'
                        :key='item.code'
                        :value='item.code'
                    >{{item.name}}</a-select-option>
                  </a-select>
                </a-form-model-item>


                <a-form-model-item
                    label="生产厂家"
                    style="margin-left: 39px">
                  <a-popover trigger="click" placement="bottom" :overlayStyle="{ width: '350px' }">
                    <template slot="content">
                      <p class="aPopover" v-for="(item,index) in supplierSearchList" :key="index"  @click="changeSupplier2(item)" >{{item.name}}</p>
                    </template>
                    <a-input style='width: 350px;height: 32px;' v-model.trim="addForm.supplier_name"
                             @keydown.enter="getSupplierIdByNameLimit(addForm.supplier_name)"
                             @change="getSupplierIdByNameLimit(addForm.supplier_name)"
                             :disabled="!canBeEdited || !isAdd"
                             allowClear
                             @click="getSupplierIdByNameLimit(addForm.supplier_name)"
                             placeholder="输入搜索并选择生产厂家"
                    ></a-input>

                  </a-popover>

                </a-form-model-item>

                <a-form-model-item
                    label="库位"
                    style="margin-left: 87px">
                  <a-input style='width: 350px;height: 32px;' v-model.trim="addForm.warehouse"  :disabled="!canBeEdited || !isAdd"></a-input>
                </a-form-model-item>
              </a-form-model>
            </div>
          </div>
        </a-spin>
      </a-modal>


      <page-head-area>
        <div class="extra" style="width: 200px;display: flex;justify-content: space-around">
          <a-button icon="plus-circle" v-auth="`insert`" @click="add" style="background-color: #fff;border: none;margin-left: 10px;width: 70px;height: 35px;">新增</a-button>
          <a-popconfirm title="批量删除?" @confirm="deleteSelect">
            <a-button icon="delete" v-auth="`delete`" style="background-color: #fff;border: none;margin-left: 10px;width: 70px;height: 35px;">删除</a-button>
          </a-popconfirm>
<!--          <a-button icon="audit"  style="background-color: #eeeeee;border: none;margin-left: 10px;width: 70px;height: 35px;">审核</a-button>-->
        </div>
      </page-head-area>

      <div class="queryBox">
        <a-form-model layout="inline" :model='queryForm' ref="queryFormRef" class='query' style='display: flex;flex-wrap: wrap;'>
          <a-form-model-item
              label="编码"
          >
            <a-input style='width: 200px;height: 32px' v-model='queryForm.code' v-auth="`query`"></a-input>
          </a-form-model-item>
          <a-form-model-item
              label="名称"
          >
            <a-input style='width: 200px;height: 32px' v-model='queryForm.name'  v-auth="`query`"></a-input>
          </a-form-model-item>

          <a-form-model-item
              label="供应商"
          >
            <a-popover trigger="click" placement="bottom" :overlayStyle="{ width: '350px' }">
              <template slot="content">
                <p class="aPopover" v-for="(item,index) in supplierSearchList" :key="index"  @click="changeSupplier(item)" >{{item.name}}</p>
              </template>
              <a-input style='width: 350px;height: 32px;' v-model.trim="queryForm.supplier_name"
                       @keydown.enter="getSupplierIdByNameLimit(queryForm.supplier_name)"
                       @change="getSupplierIdByNameLimit(queryForm.supplier_name)"
                       v-auth="`query`"
                       allowClear
                       @click="getSupplierIdByNameLimit(queryForm.supplier_name)"
                       placeholder="输入搜索生产厂家"
              ></a-input>

            </a-popover>
          </a-form-model-item>

          <a-form-model-item
              label="日期范围"
              style=""
              ref="dateRef"
          >
            <a-range-picker
                format="YYYY-MM-DD"
                v-model.trim="queryForm.dateSelect"
                :allow-clear="true"/>
          </a-form-model-item>

          <a-form-model-item>
            <a-button type='primary' style='height: 32px;width: 70px;text-align: center' @click="reset" v-auth="`query`">
              重置
            </a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type='primary' style='height: 32px;width: 70px;text-align: center' @click="filter" v-auth="`query`">
              搜索
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
      <div class="dataBox">
        <a-table
            :columns="columns"
            :data-source="data"
            :pagination="false"
            :loading="tableLoading"
            :rowKey="(recordMain) => {return recordMain.id}"
            :scroll="{ x: 1000, y: 500 }"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        >
          <template slot="action" slot-scope="record">
            <a-popconfirm title="确定退货?"
                          ok-text="确定"
                          cancel-text="取消"
                          @confirm="returnable(record)">
              <a v-auth="`query`" >退货</a>
            </a-popconfirm>

          </template>
        </a-table>

      </div>
      <a-pagination
          @change="onChangePage"
          @showSizeChange="showSizeChange"
          :total="pagination.total"
          :showSizeChanger="true"
          :showQuickJumper="true"
          :defaultPageSize="pagination.defaultPageSize"
          :pageSize="pagination.page_size"
          :pageSizeOptions="pagination.pageSizeOptions"
          :current="pagination.current"
          :showTotal="pagination.showTotal"
          style="width: 100%;display: flex;flex-direction: row;justify-content: flex-end;margin-top: 15px"
      ></a-pagination>
    </a-card>
  </div>
</template>

<script>

import {mapGetters} from "vuex";
import PageHeadArea from "../module/pageHeadArea.vue";
import pagination from "ant-design-vue/lib/pagination";
import storage from "store";
import {DEPT_ID, ORGANIZATION_ID, USER_TOKEN} from "@/store/mutation-types";
import axios from "axios";
import moment from "moment";
import {
  file_import, file_upload,
  get_employee_list,
  get_extended_define, get_asset_file_list, get_supplier, get_unit_list, download_file,
  get_organization_list,
  delete_asset, get_asset_list, save_asset, update_asset,
  get_category_type_list, get_organization_profile_list, get_template_list, update_extend
} from "@/services/manage";
import {
  deleteSparePartsInventory,
  deleteSparePartsRequest,
  getPartsById,
  getSparePartsRequestList,
  getSupplierById, getSupplierIdByName,
  getUserNameById,
  listSparePartsInventory, listSparePartsReceive, saveSparePartsInventory
} from "../../utils/interface";
import {message} from "ant-design-vue";
import {list_spare_parts_inventory} from "../../services/deviceRepair";
const data = []
const columns = [
  { title: '编码', width: 120, align:'center', dataIndex: 'part_code', key: 'part_code'},
  { title: '批次', width: 120, align:'center', dataIndex: 'batch_code', key: 'batch_code'},
  { title: '图号', width: 120, align:'center', dataIndex: 'figure_number', key: 'figure_number'},
  { title: '名称', width: 120, align:'center', dataIndex: 'part_name', key: 'part_name'},
  { title: '数量', width: 120, align:'center', dataIndex: 'quantity', key: 'quantity'},
  { title: '价格', width: 120, align:'center', dataIndex: 'unit_price', key: 'unit_price'},
  { title: '金额', width: 120, align:'center', dataIndex: 'amount', key: 'amount'},
  { title: '入库日期', width: 120, align:'center', dataIndex: 'create_time', key: 'create_time'},
  { title: '已领', width: 120, align:'center', dataIndex: 'received_quantity', key: 'received_quantity'},
  { title: '供应商', width: 120, align:'center', dataIndex: 'supplier_name', key: 'supplier_name'},
  { title: '库位', width: 120, align:'center', dataIndex: 'warehouse', key: 'warehouse'},
  {
    title: '操作',
    align:'center',
    key: 'operation',
    fixed: 'right',
    width: 180,
    scopedSlots: { customRender: 'action' }
  }
]


export default {
  name: "userAuthority",
  components: {PageHeadArea},
  data() {
    return {
      supplierSearchList:[],
      selectedRowKeys:[],
      axiosSource: null,
      tabKey: '1',
      title:'',
      tabBarGutter: 0,
      tabBarStyle: {
        color: 'rgba(0, 0, 0, 0.85)'
      },
      bodyStyle: {
        'padding': '0px 24px 0px 24px',
        'font-size': '14px',
        'line-height': '1.5',
        'word-wrap': 'break-word',
      },
      cardMinHeight: 0,
      queryForm: {
        code: undefined,
        name: undefined,
        supplier_name:undefined,
        supplier_id:undefined,
        dateSelect:[]
      },
      addForm:{
        spare_parts_id:undefined,
        spare_parts_code:undefined,
        spare_parts_name:undefined,
        batch_code:undefined,
        quantity:undefined,
        unit_price:undefined,
        amount:undefined,
        storage_date:undefined,
        is_claimed:undefined,
        supplier_id:undefined,
        supplier_name:undefined,
        warehouse:undefined,
        partSearchList:[],
        claimedList:[
            {code:0, name:'未领用'},
            {code:1, name:'已领用'}
        ]

      },
      statusList: [
        // {id: 1, name: '待采购', code: '0', type: 'use_status'},
        {id: 1, name: '正常运行', code: '1',type: 'use_status'},
        {id: 2, name: '不正常运行', code: '2',type: 'use_status'},
      ],
      gradesList: [
        // {id: 1, name: '待采购', code: '0', type: 'use_status'},
        {id: 1, name: '1级设备', code: '1',type: 'use_status'},
        {id: 2, name: '2级设备', code: '2',type: 'use_status'},
        {id: 3, name: '3级设备', code: '3',type: 'use_status'},
        {id: 4, name: '4级设备', code: '4',type: 'use_status'},
        {id: 5, name: '5级设备', code: '5',type: 'use_status'},
      ],
      data,
      columns,
      pagination: {
        total: 0,
        page_size: 10,
        defaultPageSize: 10,
        page: 1,
        current: 1,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: total => `共 ${total} 条记录`,
        pageSizeOptions: ['10', '20', '50', '100', '500'],
      },
      tableLoading: false,
      addModal: false,
      canBeEdited: false, //是否可编辑
      isAdd: false, //是否为新增
      spinning: false,

      detailModal:false, //详情弹窗
      canBeQuery:false, //是否可查询

      remodelModal:false,
      disposalModal:false,
    }
  },
  watch: {},
  authorize: {
    add: 'insert',
    getAssetLedgerList: 'query',
    reset: 'query',
    query: 'query',
    detail: 'query',
    edit: 'update',
    del: 'delete',
    check: 'check',
  },
  computed: {
    ...mapGetters(['getCardMinHeight']),
  },
  created() {
    this.cardMinHeight = this.getCardMinHeight
  },
  async mounted() {
    this.axiosSource = axios.CancelToken.source();

    await this.initialize()

  },
  methods: {
    async getPartIdByCodeLimit(code) {
      await getPartsById({'code': code}).then(res => {
        //添加res中值到supplierSearchList
        this.addForm.partSearchList = []
        res.slice(0, 10).forEach(item => {
          this.addForm.partSearchList.push({
            id: item.id,
            code: item.code,
            name: item.name,
          })
        })
      })
    },
    async getPartIdByNameLimit(name) {
      await getPartsById({'name': name}).then(res => {
        //添加res中值到supplierSearchList
        this.addForm.partSearchList = []
        res.slice(0, 10).forEach(item => {
          this.addForm.partSearchList.push({
            id: item.id,
            code: item.code,
            name: item.name,
          })
        })
      })
    },
    changePart(item) {
      this.addForm.spare_parts_id= item.id
      this.addForm.spare_parts_code= item.code
      this.addForm.spare_parts_name= item.name
      this.addForm.partSearchList=[]
    },
    calculateAmount(quantity){
        if(this.addForm.unit_price!==undefined&&quantity!==undefined){
          this.addForm.amount= quantity*this.addForm.unit_price
        }
    },
    calculate2Amount(unit_price){
      if(this.addForm.quantity!==undefined&&unit_price!==undefined){
        this.addForm.amount= unit_price*this.addForm.quantity
      }
    },
    // 通过supplier_name查supplier_id supplierSearchList 查生产厂家
    async getSupplierIdByNameLimit(supplier_name) {
      await getSupplierIdByName(supplier_name).then(res => {
        //添加res中值到supplierSearchList
        this.supplierSearchList = []
        res.slice(0, 10).forEach(item => {
          this.supplierSearchList.push({
            id: item.id,
            name: item.name
          })
        })
      })
    },
    onChangePage (page, pageSize) {
      this.pagination.current = page
      this.pagination.page_size = pageSize
      this.pagination.page = page
      this.initialize()
    },
    showSizeChange(current, size){
      this.pagination.page_size = size
      this.pagination.current = current
      this.pagination.page = current
      this.initialize()
    },
    changeSupplier(item){
      this.queryForm.supplier_id=item.id;
      this.queryForm.supplier_name=item.name;
      this.supplierSearchList=[]
    },
    changeSupplier2(item){
      this.addForm.supplier_id=item.id;
      this.addForm.supplier_name=item.name;
      this.supplierSearchList=[]
    },
    returnable(record){
      console.log(record)
    },
    onSelectChange(selectedRowKeys) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    async deleteSelect() {
      for (const item of this.selectedRowKeys) {
        await deleteSparePartsInventory({'id': item})
      }
      this.selectedRowKeys = []
      message.success('删除成功')
      await this.initialize()
    },
    async filter() {
      //筛选
      this.pagination.page = 1
      this.pagination.current = 1
      this.pagination.page_size = 10
      this.tableLoading = true
      await this.initialize({
        'supplier_id':this.queryForm.supplier_id
      })
      this.tableLoading = false;
    },
    async initialize(params) {
      try {
        this.tableLoading = true;
        this.data = [];
        const paramsAll = Object.assign({}, params, {
          "page": this.pagination.page,
          "page_size": this.pagination.page_size
        });

        const res = await list_spare_parts_inventory(paramsAll);
        // console.log(res);
        if (res.data.code === '1000') {
          this.pagination.total = res.data.extension.total+(this.pagination.current-1)*this.pagination.page_size
          // 并行获取零件信息和供应商信息
          const partsPromises = res.data.data.map(async (item) => {
            const partInfo = await getPartsById({ id: item.spare_parts_id });
            item.part_code = partInfo[0]?.code || '';
            item.part_name = partInfo[0]?.name || '';
            item.figure_number = partInfo[0]?.figure_number || '';

            // item.price = item.unit_price * item.quantity;

            // 已领数量
            const receivedItems = await listSparePartsReceive({ inventory_id: item.id });
            item.received_quantity = receivedItems.reduce((sum, receiveItem) => sum + receiveItem.quantity, 0);

            // 获取供应商名称
            item.supplier_name = (await getSupplierById(item.supplier_id)).data.name;

            return item;
          });

          // 等待所有零件信息和供应商信息获取完毕
          const updatedItems = await Promise.all(partsPromises);

          // 筛选符合日期条件的项目
          const [startDate, endDate] = this.queryForm.dateSelect;
          this.data = updatedItems.filter(item => {
            return (
                (!this.queryForm.code || item.part_code?.includes(this.queryForm.code)) &&
                (!this.queryForm.name || item.part_name?.includes(this.queryForm.name)) &&
                (!startDate || new Date(item.create_time) >= new Date(startDate)) &&
                (!endDate || new Date(item.create_time) <= new Date(endDate))
            );
          }).slice(0, this.pagination.page_size);
        }

        this.tableLoading = false;
      } catch (error) {
        console.error('初始化过程中发生错误:', error);
        this.tableLoading = false;
        message.error('初始化过程中发生错误:')
      }
      console.log(this.data)
    },
    callback (key) { // assetCode
      this.tabKey = key
    },
    // 分页切换
    onChange (pagination) {
      this.pagination.current = pagination.current
      this.pagination.page_size = pagination.pageSize
      this.pagination.page = pagination.current
      this.getAssetLedgerList()
    },
    async query() {
      this.pagination.page = 1
      this.pagination.current = 0
      this.pagination.page_size = 10
      this.tableLoading = true
      await this.initialize()
      this.tableLoading = false
    },
    reset() {
      this.queryForm = {
        code: undefined,
        name: undefined,
        supplier_name:undefined,
        supplier_id:undefined,
        dateSelect:[]
      }
      this.supplierSearchList=[]
      this.query()
    },
    add() {
      this.clearAddParams()
      this.addModal = true
      this.canBeEdited = true
      this.isAdd = true
      this.spinning = false
    },
    onChangeStorageDate(value, dateString){
      this.addForm.storage_date = dateString
    },
    handleCancel0(){
      this.addModal = false
      this.canBeEdited = false
      this.isAdd = false
      this.clearAddParams()
      this.spinning = true
    },
    claimedStatusChange(value){
      this.addForm.is_claimed=value

    },
    async submitAddParams() {
      console.log(this.addForm)
      if (this.addForm.spare_parts_id === undefined || this.addForm.spare_parts_name===undefined) {
        message.error('请选择备件')
        return
      }
      if (this.addForm.batch_code === undefined) {
        message.error('请输入批次编码')
        return
      }
      //新增
      await saveSparePartsInventory({
        'spare_parts_id': this.addForm.spare_parts_id,
        'batch_code':this.addForm.batch_code,
        'quantity':this.addForm.quantity,
        'unit_price':this.addForm.unit_price,
        'amount':this.addForm.amount,
        'storage_date':this.addForm.storage_date,
        'is_claimed':this.addForm.is_claimed,
        'supplier_id':this.addForm.supplier_id,
        'warehouse':this.addForm.warehouse,

      }).then(async res => {
        if (res === 'OK') {
          message.success('新增成功')
          this.handleCancel0()
          await this.initialize()
        }else{
          message.error('新增失败')
        }
      })
    },
    clearAddParams(){
      this.addForm={
        spare_parts_id:undefined,
        spare_parts_code:undefined,
        spare_parts_name:undefined,
        batch_code:undefined,
        quantity:undefined,
        unit_price:undefined,
        amount:undefined,
        storage_date:undefined,
        is_claimed:undefined,
        supplier_id:undefined,
        supplier_name:undefined,
        warehouse:undefined,
        partSearchList:[],
        claimedList:[
          {code:0, name:'未领用'},
          {code:1, name:'已领用'}
        ]
      }
      this.supplierSearchList=[]
    },
    edit(record) {
      this.addModal = true
      this.canBeEdited = true
      this.isAdd = false
      this.echo(record)
    },
    detail(record) {
      this.detailModal = true
      this.canBeEdited = false
      this.canBeQuery =true
      this.isAdd = false
      this.echo(record)
    },
    clearParameter() {},
    handleCancel() {
      this.tabKey = '1'
    },
    submit() {

    },
  },
  beforeDestroy() {
    if (this.axiosSource) {
      this.axiosSource.cancel('Request canceled due to page navigation.');
    }
  }
}
</script>

<style scoped lang="less">
.aPopover{
}
.aPopover:hover {
  background-color: #EA5413;
}

.dataBox{
  margin-top: 20px;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.hide-scrollbar {
  -ms-overflow-style: none;  /* IE 和 Edge */
  scrollbar-width: none;  /* Firefox */
  overflow-y: scroll; /* 保持内容可滚动 */
}
.demo-infinite-container {
  margin-top: 0px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: auto;
  padding: 8px 24px;
  height: 300px;
}
/deep/ .ant-form-inline .ant-form-item-with-help{
  margin-bottom: 0px;
}
/deep/ .ant-input[disabled]{
  pointer-events: none;
  color: #000000d9;
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 1;
}
/deep/ .unit .ant-select-selection--single{
  margin-left: 0px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}
/deep/ .ant-select-disabled .ant-select-selection {
  background-color: #fff;
}
/deep/ .ant-input[disabled]{
  pointer-events: none;
  color: #000000d9;
  background-color: #fff;
  cursor: not-allowed;
  opacity: 1;
}
/deep/ .ant-input-number-disabled{
  pointer-events: none;
  color: #000000d9;
  background-color: #fff;
  cursor: not-allowed;
  opacity: 1;
}
</style>